<template>
  <div id="app" :class="{ 'dark-theme': isDarkMode }">
    <router-view />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useUserStore } from '@/store/user';

const userStore = useUserStore();
const isDarkMode = computed(() => userStore.preferences?.theme === 'dark');
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
}

#app {
  height: 100%;
  background-color: #f5f7fa;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

#app.dark-theme {
  background-color: #1a1a1a;
  color: #e0e0e0;
}
</style>


